<template>
    <div>
      <el-row>
        <el-col :offset="2" :span="20" align="middle">
          <el-card>
            <div slot="header">
              <el-row>
                <el-col :span="8" :offset="8">
                  <el-row :gutter="6">
                    <el-col :span="20">
                      <el-input v-model="key" placeholder="学号/手机号"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="primary" @click="selectStudentProcessByNumOrPhone">查询</el-button>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <div>
              <div>
                <b v-if="processVo.studentName">姓名：{{processVo.studentName}}</b>
              </div>
              <br/>
              <el-row :gutter="6">
                <el-col v-for="(item, index) in processVo.process" :key="index" :span="6" align="middle">
                  <div class="round" @click="showDetail(index, item.id)"
                       :style="{'background-color': activeNodes.indexOf(item.id) !== -1 ? '#42b983' : 'firebrick'}">
                    <span style="font-size: 20px">{{index + 1}}</span>
                  </div>
                  <span style="font-weight: bold;font-size: 15px;margin-top: 10px">{{item.title}}</span>
                </el-col>
              </el-row>
              <el-row v-if="content">
                <div style="margin-top: 5%">
                  <h3>{{content}}</h3>
                  <el-button v-if="activeNodes.indexOf(this.processId) === -1" type="primary" @click="finishProcess">完成</el-button>
                </div>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import {selectStudentProcessByNumOrPhone, updateProcessById} from "../api/fom";
  import {mixin} from "../mixins";

  export default {
    name: "FOM",
    mixins: [mixin],
    data(){
        return{
          key: '',
          processVo: {},
          activeNodes: [],
          content: '',
          processId: ''
        }
    },
    created() {

    },
    methods: {
      selectStudentProcessByNumOrPhone(){
        selectStudentProcessByNumOrPhone(this.key).then(({data}) => {
          if(data.code === 0){
            this.activeNodes = []
            this.processVo = data.processVo
            data.processVo.current.trim().split(",").forEach(item => {
              if(item !== "" && item !== undefined){
                this.activeNodes.push(parseInt(item))
              }
            })
            this.content = data.processVo.process[0].content
            this.processId = data.processVo.process[0].id
          }else{
            this.notify("无此学生，请仔细核对再查询", "error")
          }
        }).catch(err => {
          console.error(err)
          this.notify("查询失败，请稍后再试", "error")
        })
      },
      showDetail(index, id){
        this.processId = id
        this.content = this.processVo.process[index].content
      },
      finishProcess(){
        // console.log(this.activeNodes)
        this.activeNodes.push(this.processId);
        let nodes = this.activeNodes.join(",")
        updateProcessById(this.processVo.id, nodes).then(({data}) => {
          if(data.code === 0){
            this.notify("设置成功", "success")
          }else{
            this.notify("设置失败，请稍后再试", "error")
          }
        }).catch(err => {
          console.error(err)
          this.notify("设置失败，请稍后再试", "error")
        })
      }
    }
  }
</script>

<style scoped>
  .round{
    cursor: pointer;
  }
</style>
